<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="${cxt }/">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>自驾租车订单</title>
<link rel="stylesheet" href="${cxt }/css/iconfont.css" />
<link rel="stylesheet" href="${cxt }/css/llp_order.css" />
<link rel="stylesheet" href="css/yk_base.css">
<script type="text/javascript" src="${cxt }/js/iconfont.js"></script>
<script type="text/javascript" src="${cxt }/js/llp_basicpage.js"></script>
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<style type="text/css">
.dd {
	height: 50px;
	width: 600px;
	margin-top: 10px;
	padding-left: 20px;
	margin-left:40px;
}

.dd input {
	width: 200px;
	height: 33px;
	background-color: #fff;
	color: #000;
	border: 1px solid #DADADA;
	text-align: center;
	margin-left:15px;
	margin-right:20px;
	font-size:20px;
}

.dd span{
	margin-top:10px;
	font-size:30px;
}

.yk_centerbutt{
	clear: both;
	width:1060px;
	margin:0 80px;
	border:none;
	height:0px;
	min-height: 440px;
	margin-left: 75px;
}
.pagecss{
		    margin-top: 40px;
    margin-left:480px;
    width: 500px;
}
.pagecss span{
	margin-left:20px;
	padding-left:10px;
}
.check{
	width:100px;
	margin-left:595px;	
	margin-top: -42px;
	display:block;
	height:35px;
	background-color: #4BCF99;
    color: #fff;
    border: 0px;
}

#notifyDialog,#upDialog,#cheDialog,#finishDialog,#findDialog{
	position:absolute;
	top:0px;
	bottom: 0px;
	left:0px;
	right: 0px;
	background: rgba(0,0,0,0.3);
	z-index: 30;
	
	
}
#notifyDialog{
	display: none;
}
#upDialog{
	display:none;
}
#cheDialog{
	display:none;
}
#finishDialog{
	display:none;
}
#findDialog{
	display:none;
}
.orderDialog{
	background-color:#fff;
	width:300px;
	height:270px;
	margin-left:480px;
	margin-top:220px;
}	

.findDialog{
	background-color:#fff;
	width:800px;
	height:700px;
	margin-left:200px;
	margin-top:0px;
}

.findDialog h3,.orderDialog h3{
	width: 290px;
	padding:5px 5px;
	margin-bottom:20px;
	background-color:#808080;
}
.findDialog h3{
	width:790px;
	margin-bottom:5px;
}
.findDialog table {
	text-align:center;
}
.orderDialog input{
	font-size:16px;
}
.cancel{
	margin-left:90px;
	font-size:18px;
}

.btn{
	margin-top:20px;
	background-color:#4BCF99;
	width:80px;
	height:30px;
	font-size:18px;
	color:#fff;
	margin-left:50px;
}
.mon{
	margin-left:5px;
	margin-top:10px;
}
</style>

<script type="text/javascript">
/* 开始日期 */
var fromdate="";
/* 结束日期 */
var todate="";
/* 手机号查询 */
var tel="";
/* 用户点击的是（首页，上一页，下一页，尾页） */
var status="";
/* 当前页数  */
var currpage=1;
/*页大小  */
var pagesize=10;
/*订单编号  */
var order="";
/* 订单状态 */
var orderstatus="";
/* 进行的操作 */
var caozuo="";
/* 第一次支付金额 */
var xmoney="";
/* 车牌号 */
var che="";
/* 最后实收金额 */
var famoney="";
/* 备注 */
var remark="";
/* 车辆破损费 */
var cpmoney="";
/*查看详情*/
var find="";
/*查看详情订单编号*/
var findid="";
/*获取押金*/
var ytmoney="";
var x="";
	$(document).ready(function() {
		var now = new Date();
		var year = now.getFullYear();
		var month = now.getMonth() + 1;
		var day = now.getDate();
		var date = year + "-" + month + "-" + day;
		$("#fromdate").val(date);
		$("#todate").val(date);	
		
		var id="first";
		$(".pagecss span").click(function(){
			if(id!=""){
				$("span[id="+id+"]").css("color","#000");
			}
			id=$(this).attr("id");
			$(this).css("color","blue");
		}).hover(function(){
			$(this).css("color","red");
		},function(){
			$(this).css("color","#000");
			$("span[id="+id+"]").css("color","blue");
		});
		
		$("#cpmoney").blur(function(){
			var p ="";
			if($("#cpmoney").val()==null||$("#cpmoney").val().length==0){
				p=0;
			}else{
				p=$("#cpmoney").val();
				if(p<0){
					$("#fei").text("车辆破损费不得小于0");
					$("#finishDialog").css("display","block");
				}else{
					$("#fei").text("");
					$("#ytmoney").val($("#ttmoney").val()-p);
					famoney = $("#spmoney").val()-$("#ytmoney").val();
					x=famoney;
					$("#ffmoney").val(famoney);
				}
			}
			
		});
		
		$("select#ls").change(function(){
			che = $(this).val();
		});
		
		
	});
	
	/* 获取用户选择的条件 */
	function cha(){
		fromdate=$("#fromdate").val();
		todate=$("#todate").val();
		tel=$("#tel").val();
	}
	
	/* 获取用户选择哪一页 */
	function page(page){
		if(page=='first'){
			status="首页";
			currpage=1;
		}else if(page=='last'){
			status="上一页";
			currpage=currpage-1;
		}else if(page=='next'){
			status = "下一页";
			currpage=currpage+1;
		}else if(page=='end'){
			status = "尾页";	
			currpage=20;
		}
	}
	
	/* 获取订单状态 */
	function getStatus(orderstatus1){
		orderstatus = orderstatus1;
	}
	
	/* 取消订单 */
	function cancel(cancel){
		if(orderstatus=='已取消' || orderstatus=='租赁中' || orderstatus=='已完成'){
			$("#notifyDialog").css("display","none");
		}else if(orderstatus=='预定成功' || orderstatus=='等待付款'){
			$("#notifyDialog").css("display","block");
			order=cancel;
			caozuo="取消";
		}	
	}
	
	/* 修改订单 */
	function finish(finish){
		order=finish;
		if(orderstatus == '等待付款'){
			$("#ystatus").val("等待付款");
			$("#xstatus").val("预定成功");
			$("#upDialog").css("display","block");
			$("#uremark").focus();
			caozuo="预定成功";
		}else if(orderstatus == '预定成功'){
			$("#cstatus").val("预定成功");
			$("#ccstatus").val("租赁中");
			getCarId();
			$("#cheDialog").css("display","block");
			$("#che").focus();
			caozuo="租赁中";
		}else if(orderstatus=='租赁中'){
			$("#finishDialog").css("display","block");
			$("#cpmoney").focus();
			$("#cpmoney").css("border","1px solid  #4BCF99");
			caozuo="已完成";
		}else if(orderstatus=='已取消'){
			$("#upDialog").css("display","none");
			$("#cheDialog").css("display","none");
			$("#finishDialog").css("display","none");
		}
		
		
	}
	
	/*获取备注  */
	function getRemark(m){
		if(caozuo == '取消'){
			$("#nremark").val(m);
		}else if(caozuo=='预定成功'){
			$("#uremark").val(m);
		}else if(caozuo=='租赁中'){
			$("#cremark").val(m);
		}else if(caozuo=='已完成'){
			$("#fremark").val(m);
		}
	}
	
	/* 获取实付金额 */
	function getMoney(money){
		$("#money").val(money);
	}
	
	/* 获取应付金额 */
	function getpMoney(pmoney){
		if(caozuo=='取消'){
			$("#pmoney").val(pmoney);
		}else{
			$("#xmoney").val(pmoney);
			if(orderstatus == '等待付款'){
				xmoney=pmoney;
			}
		}
		
	}
	
	/*获取押金*/
	function getYajin(y){
		$("#ttmoney").val(y);
	}
	
	/* 获取实收金额 */
	function getfMoney(fmoney){
		if(caozuo=='取消'){
			$("#fmoney").val(fmoney);	
		}else{
			$("#spmoney").val(fmoney);
		}
		
	}
	
	
	/* 是否修改 */
	function change(change){
		if(change=='no'){
			order="";	
			$("#notifyDialog").css("display","none");
			$("#upDialog").css("display","none");
			$("#cheDialog").css("display","none");
			$("#kong").text("");
			$("#finishDialog").css("display","none");
		
		}else if(change=='yes'){
			if(caozuo == '租赁中'){
				if(che==null||che.length==0||che=='请选择'){
					$("#kong").text("车牌号不能为空");
					$("#cheDialog").css("display","block");
					$("#ls").focus();
				}else{
					remark=$("#cremark").val();
					$("#cheDialog").css("display","none");
					getOrder();
					$("#kong").text("");
				}
				
			}else if(caozuo == '已完成'){
				cpmoney=$("#cpmoney").val();
				if(cpmoney<0){
					$("#fei").text("车辆破损费不得小于0");
					$("#finishDialog").css("display","block");
					$("#cpmoney").focus();
				}else{
					famoney=$("#ffmoney").val();
					if(famoney<x){
						$("#shi").text("实收金额不得小于应收金额");
						$("#ffmoney").focus();
					}else{
						remark = $("#fremark").val();	
						ytmoney=$("#ytmoney").val();
						$("#finishDialog").css("display","none");
						getOrder();
						$("#fremark").val("");
						$("#fei").text("");
						$("#cpmoney").val("");
						$("#ytmoney").val("");
						$("#ffmoney").val("");
						$("#shi").text("");
					}
					
				}
				
				
			}else if(caozuo == '预定成功'){
				remark = $("#uremark").val();
				$("#upDialog").css("display","none");
				getOrder();
			}else if(caozuo=='取消'){
				remark = $("#nremark").val();
				$("#notifyDialog").css("display","none");
				getOrder();
			}
			
		}
		$("#che").val("");
	}
	
	
	
	/*查看详情  */
	function detail(de){
		$("#findDialog").css("display","block");
		find="查看详情";
		findid = de;
	}
	
	/*关闭详情界面*/
	function cl(){
		$("#findDialog").css("display","none");
	}
	
	function getOrder(){
		$.ajax({
			type:"get",
			url:"selfDrivingAdmin",
			data:"fromdate="+fromdate+"&todate="+todate+"&tel="+tel+"&currpage="+currpage+"&status="+status+"&pagesize="+pagesize+"&order="+order+"&orderstatus="+orderstatus+"&caozuo="+caozuo+"&xmoney="+xmoney+"&che="+che+"&famoney="+famoney+"&remark="+remark+"&cpmoney="+cpmoney+"&find="+find+"&findid="+findid+"&ytmoney="+ytmoney+"",
			success:function(e){
				if(find=='查看详情'){
					$("#findDialog").html("");
					$("#findDialog").html(e);
					find="";
				}else{
					$("#order").html("");
					$("#order").html(e);
				}
				
			}
		});
	}
	
	function getCarId(){
		alert(order);
		$.ajax({
			type:"get",
			url:"ajaxselfcarid",
			data:"order="+order+"",
			success:function(e){
				$("#yk select#ls").html("");
				$("#yk select#ls").html(e);
			}
		});
	}

</script>
</head>
<body>
	<div class="contentdiv" style="width:1250px;">
		<div class="top">
			<i class="iconfont icon-jibenshezhi"></i> <span>自驾租车订单</span>
		</div>
		<div class="center" style="width:1250px;height:655px;">
			<div class="centertop">
				<div class="dd">
					<input type="date" id="fromdate">
					 <span>-</span> 
					<input type="date" id="todate" readonly="readonly">
				</div>
				
					<!-- <input type="button" value="删除" class="check pointer"> -->
				<div class="find" style="margin-left: 830px; margin-top: -50px;">
					<input id="tel" class="findtext" type="text" placeholder="请输入订单电话" style="margin-left: -80px;text-indent: 1.5em;margin-right: 80px;width: 202px;"/>
					 <input type="button" value="查询" onclick="cha();getOrder();" class="pointer"/>
				</div>

			</div>

			<div class="yk_centerbutt centerbutt">
				<table border="0" cellpadding="0" cellspacing="0" id="order">
					<tr>
						<th>编号</th>
						<th>状态</th>
						<th>应付金额</th>
						<th>实付金额</th>
						<th>实收金额</th>
						<th>押金</th>
						<th>电话</th>
						<th>实际租车人</th>
						<th>服务备注</th>
						<th>操作</th>
						<th>查看详情</th>
					</tr>
					<c:forEach items="${pages.data}" var="item">
						<tr>
							<td>${item.id }</td>
							<td>${item.status }</td>
							<td>${item.pmoney }</td>
							<td>${item.money }</td>
							<td>${item.fmoney }</td>
							<td>${item.ymoney }</td>
							<td>${item.tel }</td>
							<td>${item.name }</td>
							<td>${item.remark}</td>
							<td>
								<input class="update pointer" type="button" value="取消" onclick="getStatus('${item.status} ');cancel('${item.id }');getpMoney('${item.pmoney }');getMoney('${item.money }');getfMoney('${item.fmoney }');getRemark('${item.remark }');"/>
								<input class="update pointer" type="button" value="修改" onclick="getStatus('${item.status} ');finish('${item.id }');getpMoney('${item.pmoney }');getfMoney('${item.fmoney }');getRemark('${item.remark }');getYajin('${item.ymoney }');" style="margin-left:5px;background-color:#4BCF99"/>
							</td>
							<td><input class="update pointer" type="button" value="查看详情" style="width: 60px;" onclick = "detail('${item.id}');getOrder();"/></td>
						</tr>
					</c:forEach>
				</table>
			</div>
			<div class="pagecss">
				<span id="first" onclick="page(id);getOrder();" style="color:blue;" class="pointer">首 页</span>
				<span id="last" onclick="page(id);getOrder();" class="pointer">上一页</span>
				<span id="next" onclick="page(id);getOrder();" class="pointer">下一页</span>
				<span id="end" onclick="page(id);getOrder();" class="pointer">尾 页</span>
			</div>
		</div>
	</div>
	<!-- 取消订单弹出界面 -->
	<div id="notifyDialog" >
			<div class="orderDialog">
				<h3>温馨提示</h3>
				<span class="cancel">确认取消订单？</span>
				<div class="mon">
					<span >应付金额:</span>
					<input type="text" readonly="readonly" id="pmoney" >
				</div>
				<div class="mon">
					<span >实付金额:</span>
					<input type="text" readonly="readonly" id="money" >
				</div>
				<div class="mon">
					<span >应退金额:</span>
					<input type="text" id="fmoney" readonly="readonly" >
				</div>
				<div class="mon">
					<span >备注:</span>
					<input type="text" id="nremark"  style="border:1px solid #4BCF99">
				</div>
				<input type="button" value="是" id="yes" onclick="change(id)" class="btn pointer">
				<input type="button" value="否" id="no" onclick="change(id)" class="btn pointer">
			</div>
		</div>
		
		<!-- 等待付款->预定成功 -->
		<div id="upDialog">
			<div class="orderDialog">
				<h3>温馨提示</h3>
				<span class="cancel">确认修改订单？</span>
				<div class="mon">
					<span >原状态:</span>
					<input type="text" readonly="readonly" id="ystatus" >
				</div>
				<div class="mon">
					<span >修改之后状态:</span>
					<input type="text" readonly="readonly" id="xstatus" style="width: 140px;">
				</div>
				<div class="mon">
					<span >应付金额:</span>
					<input type="text" id="xmoney" readonly="readonly">
				</div>
				<div class="mon">
					<span >备注:</span>
					<input type="text" id="uremark"  style="border:1px solid #4BCF99">
				</div>
				<input type="button" value="是" id="yes" onclick="change(id)" class="btn pointer">
				<input type="button" value="否" id="no" onclick="change(id)" class="btn pointer">
			</div>
		</div>
		<!--预订成功->租赁中  -->
		<div id="cheDialog">
			<div class="orderDialog" style="height:290px;">
				<h3>温馨提示</h3>
				<span class="cancel">确认修改订单？</span>
				<div class="mon">
					<span >原状态:</span>
					<input type="text" readonly="readonly" id="cstatus" >
				</div>
				<div class="mon">
					<span >修改之后状态:</span>
					<input type="text" readonly="readonly" id="ccstatus" style="width: 140px;">
				</div>
				<div class="mon" id="yk">
					<span >车牌号:</span>
					<select id="ls">
					</select>
				</div>
				<span id="kong" style="margin-left: 62px;color:red;"></span>
				<div class="mon">
					<span >备       注:</span>
					<input type="text" id="cremark" style="border:1px solid #4BCF99">
				</div>
				<input type="button" value="是" id="yes" onclick="change(id)" class="btn pointer">
				<input type="button" value="否" id="no" onclick="change(id)" class="btn pointer" >
			</div>
		</div>
		
		<!--租赁中->已完成  -->
		<div id="finishDialog">
			<div class="orderDialog" style="height:350px;margin-top:185px;">
				<h3>温馨提示</h3>
				<span class="cancel">确认完成订单？</span>
				<div class="mon">
					<span >押金:</span>
					<input type="text" id="ttmoney" readonly="readonly" style="border:1px solid #4BCF9;width: 113px;">
				</div>
				<div class="mon">
					<span >实付金额:</span>
					<input type="text" id="spmoney" readonly="readonly" style="border:1px solid #4BCF9;width: 113px;">
				</div>
				<div class="mon">
					<span >请输入车辆破损费:</span>
					<input type="text" id="cpmoney" style="border:1px solid #4BCF9;width: 113px;">
				</div>
				<span id="fei" style="margin-left: 62px;color:red;"></span>
				<div class="mon">
					<span >应退金额:</span>
					<input type="text" id="ytmoney" readonly="readonly" style="border:1px solid #4BCF9;width: 113px;">
				</div>
				<div class="mon">
					<span >请输入实收金额:</span>
					<input type="text" id="ffmoney" style="border:1px solid #4BCF9;width: 113px;">
				</div>
				<span id="shi" style="margin-left: 62px;color:red;"></span>
				<div class="mon">
					<span >备注:</span>
					<input type="text" id="fremark"  style="border:1px solid #4BCF99">
				</div>
				<input type="button" value="是" id="yes" onclick="change(id)" class="btn pointer">
				<input type="button" value="否" id="no" onclick="change(id)" class="btn pointer" >
			</div>
		</div>
		
		<!-- 查看详情界面 -->
		<div id="findDialog" >
			
		</div>
</body>
</html>